<!--
 * @Author: Binggan
 * @Date: 2020-03-01 20:16:31
 * @LastEditors: Binggan
 * @LastEditTime: 2020-03-08 17:34:12
 * @Description: 新闻详情页
 -->
<template>
  <div>
    <div class="t-center title-info">
      <Button class="goback" type="primary" shape="circle" icon="ios-arrow-back" to="/">返回</Button>
      <h2>{{news.title}}</h2>
      <p class="small-info">
        <Tag class="count" color="red">热度：{{news.count}}</Tag><span>{{news.createTime}}</span>
      </p>
    </div>
    <div class="news-detail" v-html="news.content">
    </div>
    <div class="comment-box">
      <Divider orientation="left" class="title">评论区</Divider>
      <ul class="comment-list">
        <li class="item" v-for="item in comments">
          <div class="main-left">
            <p class="user-info">
              <strong class="user-name">{{item.username}}</strong>
              <span>{{item.createTime}}</span>
            </p>
            <p class="reply-text">
              {{item.replyText}}
            </p>
          </div>
          <Button type="error" @click="deleteComment(item)">删除此条评论</Button>
        </li>
      </ul>
    </div>
    <!--删除对话框 -->
    <Modal v-model="modal1">
      <p slot="header" style="color:#f60">
        <Icon type="ios-information-circle"></Icon>
        <span>删除确认</span>
      </p>
      <div style="font-size:14px">
        <p style="color:#000">请确认是否删除这条评论?</p>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" @click="modal1=false">取消</Button>
        <Button type="error" size="large" @click="deleteConfirm">确认删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: {},
      comments: [],
      tempObj: {},
      modal1: false
    };
  },
  computed: {
    newsId() {
      console.log(this.$route.params.newsId);
      return this.$route.params.newsId;
    }
  },
  methods: {
    getNewsDetail() {
      this.$axios
        .get("/news/findOneById", { params: { id: this.newsId } })
        .then(res => {
          this.news = res.data;
        });
    },
    getComments() {
      //获取评论
      this.$axios
        .get("/reply/findNewsReplies", { params: { newsId: this.newsId } })
        .then(res => {
          if (res.errorCode == 0) {
            this.comments = res.data;
          }
        });
    },
    deleteComment(item) {
      //删除评论
      this.tempObj = JSON.parse(JSON.stringify(item));
      this.modal1 = true;
    },
    deleteConfirm() {
      this.$axios
        .get("/reply/del", { params: { id: this.tempObj.id } })
        .then(res => {
          if (res.errorCode == 0) {
            this.$Message.success("操作成功!");
            this.getComments();
          }
          this.modal1 = false;
        });
    }
  },
  created() {
    this.getNewsDetail();
    this.getComments();
  }
};
</script>

<style lang="scss" scoped>
.title-info {
  text-align: center;
  margin: 20px;
  position: relative;
  .goback {
    position: absolute;
    right: 20px;
  }
  h2 {
    font-size: 26px;
    font-weight: normal;
    margin-bottom: 12px;
    color: #17233d;
  }
  .small-info {
    .count {
      margin-right: 20px;
    }
    span:not(:last-child) {
      padding-right: 20px;
    }
  }
}
.news-detail {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #d2d2d2;
  // box-shadow: 0 13px 10px -13px #7b7b7b;
}
.comment-box {
  background: #fff;
  padding: 20px;
  margin-top:10px;
  .title {
    font-size: 22px;
    color: #909090;
  }
  .comment-list {
    .item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #d2d2d2;
      transition: 0.3s ease-in;
      padding: 0 20px 12px 20px;
      &:hover {
        box-shadow: 0 17px 10px -14px #909090;
      }
      .main-left {
        flex: 1;
        margin-right: 20px;
      }
    }
    .user-info {
      .user-name {
        font-size: 20px;
        margin-right: 20px;
        color: #0a82c1;
      }
      span {
        color: #7b7b7b;
      }
    }
    .reply-text {
      color: #565656;
      font-size: 14px;
    }
  }
}
</style>